<!-- 收款统计页 -->
<template>
  <div class="Sales">
    <div
      style="
        height: 100%;
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
      "
    >
      <div class="top" style="">
        <div class="flex">
          <el-select
            v-model="selectKey"
            style="width: 130px"
            @change="selectChange"
          >
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
          </el-select>
          <el-input
            :placeholder=" placeholder"
            v-model="searchKey"
            @input="inputChange"
            @keydown.enter.native="search"
          ></el-input>
        </div>
        <div class="flex" style="margin-top: 10px">
          <el-date-picker
            v-model="queryParam.StartTime"
            type="date"
            placeholder="开始日期"
            @change="startTimeChange"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          <el-date-picker
            v-model="queryParam.EndTime"
            type="date"
            placeholder="结束日期"
            @change="endTimeChange"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="table" style="margin-top: 10px">
        <!--  -->
        <el-table
          :height="tableHeight"
          ref="queryForm"
          element-loading-text="拼命加载中"
          :data="tableData"
          v-loading="loading"
          v-el-table-infinite-scroll="scrollLoad"
          :infinite-scroll-immediate="false"
          :infinite-scroll-disabled="scrollDisaled"
        >
          <el-table-column prop="cCusName" :label="label" align="left" fixed>
          </el-table-column>
          <el-table-column prop="ReceiveSum" label="收款金额" align="left">
          </el-table-column>
          <!-- <div v-if="tableData.length == pagination.total" style="text-align:center;padding-top:10px;">没有更多了</div> -->
        </el-table>
      </div>
      <!-- <el-talbe>
        <el-table-column prop="ReceiveSum" label="总计" align="left"> </el-table-column>
      </el-talbe> -->
    </div>
    <div
      style="width: 100%;
        position: fixed;
        bottom: 0;
        padding: 20px;
        background-color: #fff;
        display: flex;
      "
    >
      <div style="flex: 5">总计:</div>
      <div style="flex: 5">{{ toThousands(totalReceiveSum) }}</div>
    </div>
  </div>
</template>

<script>
import { timeStamp } from "console";
import { getMonthRange, toThousands } from "../../../utils/Tools";
export default {
  data() {
    return {
      label:'客户',
      scrollDisaled: false,
      toThousands,
      tableHeight: 200,
      // 月份工具
      getMonthRange,
      loading: false,
      // 开始日期
      StartTime: "",
      // 结束日期
      EndTime: "",
       // 下拉选择数据
       options: [
        {
          value: "0",
          label: "客户",
        },
        {
          value: "1",
          label: "业务员",
        },
      ],
      // 收款统计列表数据
      tableData: [],
      selectKey: "客户",
      placeholder: "请输入客户进行查询",
      searchKey: "",
      date: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: [10, 30, 50],
      },
      sorter: {
        field: "CreateTime",
        order: "desc",
      },
      queryParam: {
        CompanyId: "",
        StartTime: "",
        EndTime: "",
        CustomerName: "",
        Type:0
      },
      totalReceiveSum: 0,
    };
  },
  mounted() {
    this.$nextTick(() => {
      // window.innerHeight 浏览器窗口的可见高度，下面的 220 是除了table最大高度的剩余空间。
      let height =
        document.documentElement.clientHeight- this.$refs.queryForm.$el.offsetHeight-10;
      this.tableHeight = height;
    });

   

  },
  created() {
    // 修改当前页面的标题
    document.title = "收款统计"



    if (this.$route.query.token) {
      sessionStorage.setItem("token", this.$route.query.token);
    }

    this.queryParam.CompanyId = this.$route.query.CompanyId;
    this.pagination.token = this.$route.query.token;

    let range = getMonthRange(1);
    this.queryParam.StartTime = range[0];
    this.queryParam.EndTime = range[1];

    // console.log(
    //   "获取路由获取路由获路由获取路由获取路由获取路由路由获取路由获取路由获取路由取路由获取路由",
    //   this.$route.query,
    //   this.pagination,
    //   getMonthRange(1)
    // );

    this.toGetList();
  },
  methods: {
    toGetList() {
      this.pagination.current = 1;
      this.scrollDisaled = true;
      this.tableData = [];
       // 获取收款统计列表数据
      this.getCollectionStatistics();
       // 获取列表收款总金额统计接口
      this.GetCollectionAllStatistics()
    },

    // 表格滚动加载
    scrollLoad() {
      // 监听表格滚动事件
      this.pagination.current++;
      if(this.pagination.current>1 && this.tableData.length==this.pagination.total){
        return
      }
     // 获取收款统计列表数据
      this.getCollectionStatistics();

    },

    // 获取列表收款总金额统计接口
    GetCollectionAllStatistics() {
      this.$http
        .post("/BO/CustomerInfo/GetCollecLinqtionAllStatistics", {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          Search: this.queryParam,
        })
        .then((resJson) => {
          if (resJson.Success) {
            this.loading = false;
            console.log("获取最终的收款统计DIDDIDIDIDIID", resJson);
            this.totalReceiveSum = resJson.Data.ReceiveSum;
          } else {
            this.loading = false;
          }
        });
    },
    // 时间选择
    startTimeChange(e) {
      console.log("开始时间", e);
      this.queryParam.StartTime = e;
      // 同时获取收款统计列表数据和收款统计总金额数据
      this.toGetList()
    },
    endTimeChange(e) {
      console.log("结束时间", e);
      this.queryParam.EndTime = e;
      // 同时获取收款统计列表数据和收款统计总金额数据
      this.toGetList()
    },
    // 搜索输入框输入
    inputChange(e) {
      console.log("搜索框输入", e);
      this.queryParam.CustomerName = e;
    },
    // 分页事件
    currentChange(page) {
      this.pagination.current = page;
      this.getCollectionStatistics();
    },
    handleSizeChange(lint) {
      this.pagination.pageSize = lint;
      this.getCollectionStatistics();
    },
    // 搜索
    search() {
       // 同时获取收款统计列表数据和收款统计总金额数据
       this.toGetList()
    },
    // 获取收款统计列表数据
    getCollectionStatistics() {
      this.loading = true;
      this.$http
        .post("/BO/CustomerInfo/GetCollecLinqtionStatistics", {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          Search: this.queryParam,
        })
        .then((resJson) => {
          if (resJson.Success) {
            this.loading = false;
            // 没数据的时候，禁用 infinite-scroll-disabled 滚动事件
            if (resJson.Data.length == 0) {
              this.scrollDisaled = true;
              return 
            }

            this.scrollDisaled = false;

            if (resJson.Data) {
              const pagination = { ...this.pagination };
              pagination.total = resJson.Total;
              this.pagination = pagination;
            }
            if (resJson.Data.length != 0) {
              resJson.Data.forEach((item) => {
                // 金额格式化
                item.ReceiveSum = toThousands(item.ReceiveSum);
              });
            }
            this.tableData = this.tableData.concat(resJson.Data);// 分页请求的数据，追加到任务列表中

            if(this.pagination.current*this.pagination.pageSize>= this.pagination.total){
              return
            }

          } else {
            this.loading = false;
          }
        });
    },

    selectChange(e) {
      
      this.queryParam.Type=Number(e) 
      this.pagination.current=1
      console.log('1111', this.queryParam.Type);
      if (e == 0) {
        this.placeholder = "请输入客户进行查询";
        this.label='客户'
      } else if (e == 1) {
        this.placeholder = "请输入业务员进行查询";
        this.label='业务员'
      } 
      // 同时收款统计列表和收款总金额统计数据
      this.toGetList()
    },
  },
};
</script>

<style lang="less" scoped>
.el-message {
  height: 100px !important;
  top: 100px !important;
  margin-top: -100px !important;
  z-index: 100000002 !important;
}

.flex {
  display: flex;
}
.Sales {
  width: 100%;
  height: 100%;
  background-image: url("../../../assets/App/background.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 5px;
  .top {
    padding: 10px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 5px;
  }
  .table {
  }
}
</style>